<template>
	<div class="personnelList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-sys fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>系统设置</el-breadcrumb-item>
			<el-breadcrumb-item>管理商圈</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="2">
						<el-button type="success" class="fl" @click="redactBtn()" round size="mini">新增商圈</el-button>
					</el-col>
					<el-col :span="22">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_120">
								<el-input v-model="s_name" placeholder="商圈名称"></el-input>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select @change="changeBtn" v-model="selectValue" placeholder="市">
									<!-- <el-option label="请选择" value=""></el-option> -->
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.city_name"
										:value="`${item.id}|${item.city_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="areaList" stripe>
						<el-table-column prop="area_sn" label="商圈编号"> </el-table-column>
						<el-table-column prop="area_name" label="商圈名称"> </el-table-column>
						<el-table-column prop="city_name" label="市"> </el-table-column>
						<el-table-column label="操作" fixed="right">
							<template slot-scope="{ row, $index }">
								<el-link :underline="false" type="info" class="InfoFont text-primary" @click="goAreaEdit(row)"
									>编辑</el-link
								>
								<el-link :underline="false" type="info" class="InfoFont text-danger">删除</el-link>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<!-- <page :total="total" @pagedata="onChildValue"></page> -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
		<!-- 新增区域 -->
		<el-dialog
			title="新增区域"
			:visible.sync="readctRoleShow"
			width="800px"
			:before-close="close"
			:close-on-click-modal="false"
		>
			<div class="auditCentent">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin"></i><span>商圈名称：</span></div>
					<div class="fl list-cont">
						<el-input v-model="addRoleArr.name"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin"></i><span>市：</span></div>
					<div class="fl list-cont">
						<el-select v-model="addRoleArr.city_arr" placeholder="请选择" @change="changeBtndialog">
							<el-option
								v-for="item in cityList"
								:key="item.id"
								:label="item.city_name"
								:value="`${item.id}|${item.city_name}|${item.city_sn}`"
							>
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="clear"></div>
				<div class="clear mt_20">
					<div class="mb_10 roleFunctionBox">
						<div class="roleTitle">
							<h3>
								<span class="mr_10">区域画图</span>
							</h3>
						</div>
						<div class="pl_10 pb_10">
							<!-- 区域画图 -->
							<maparea @func="getMsgFormSon" ref="mychildarea" v-if="readctRoleShow"></maparea>
							<div class="wrap_h5">
								<h5>说明：1、白心圆点可拖动，双击可删除</h5>
								<h5 style="text-indent: 3em;">2、蓝心圆点拖拽后变为实心圆点，同时新增两个蓝心圆点</h5>
								<h5 style="text-indent: 3em;">3、点击“重绘”可清空所有圆点，重新绘制</h5>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div slot="footer" style="text-align: center;">
				<span class="btnOK mr_20" @click="readctSubmit">确 定</span>
				<span class="resetBtn" @click="close">取 消</span>
			</div>
		</el-dialog>
		<!-- 修改区域 -->
		<el-dialog
			title="修改区域"
			:visible.sync="readctRoleShowEdit"
			width="800px"
			:before-close="close"
			:close-on-click-modal="false"
		>
			<div class="auditCentent">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin"></i><span>商圈名称：</span></div>
					<div class="fl list-cont">
						<el-input v-model="addRoleArr.name"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin"></i><span>商圈中心点：</span></div>
					<div class="fl list-cont">
						<el-input v-model="coordinates[0]"></el-input>
					</div>
					<div class="fl list-cont">
						<el-input v-model="coordinates[1]"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin"></i><span>半径：</span></div>
					<div class="fl list-cont">
						<el-input v-model="radius"></el-input>
					</div>
					<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px;">公里</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin"></i><span>市：</span></div>
					<div class="fl list-cont">
						<el-select v-model="addRoleArr.city_arr" placeholder="请选择" @change="changeBtndialog">
							<el-option
								v-for="item in cityList"
								:key="item.id"
								:label="item.city_name"
								:value="`${item.id}|${item.city_name}|${item.city_sn}`"
							>
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="clear"></div>
				<div class="clear mt_20">
					<div class="mb_10 roleFunctionBox">
						<div class="roleTitle">
							<h3>
								<span class="mr_10">区域画图</span>
							</h3>
						</div>
						<div class="pl_10 pb_10">
							<!-- 区域画图 -->
							<mapareaedit
								@func="getMsgFormSon"
								ref="mychild"
								:toSonData="addRoleArr.path"
								v-if="readctRoleShowEdit"
							></mapareaedit>
							<div class="wrap_h5">
								<h5>说明：1、白心圆点可拖动，双击可删除</h5>
								<h5 style="text-indent: 3em;">2、蓝心圆点拖拽后变为实心圆点，同时新增两个蓝心圆点</h5>
								<h5 style="text-indent: 3em;">3、点击“重绘”可清空所有圆点，重新绘制</h5>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div slot="footer" style="text-align: center;">
				<span class="btnOK mr_20" @click="readctEdit">确 定</span>
				<span class="resetBtn" @click="close">取 消</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
import maparea from '../components/Maparea.vue'
import mapareaedit from '../components/Mapareaedit.vue'
import { fetchAreaList } from '@/api/shop.js'
import { fetchCityList } from '@/api/city.js'
export default {
	name: 'AreaLists',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			cityList: [], //城市列表
			areaList: [], //商圈列表
			readctRoleShow: false, //区域框架的显示隐藏
			readctRoleShowEdit: false, //区域框架的显示隐藏
			s_name: '',
			selectValue: '', //获取id和value
			s_city_id: '',
			s_city_name: '',
			addRoleArr: {
				name: '',
				city_arr: '',
				city_id: '',
				city_name: '',
				city_sn: '',
				path: ''
			},
			coordinates: [],
			radius: '',
			Editid: '',
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20
		}
	},
	components: { maparea, mapareaedit },
	created() {
		let pagingArr = JSON.parse(sessionStorage.getItem('pagingArr')) //分页存储
		if (pagingArr) {
			let paging = pagingArr.filter(val => {
				return val.name == 'personnelList'
			})
			paging = paging[0]
			if (paging) {
				sessionStorage.removeItem('pagingArr') //清除分页存储
			} else {
			}
		} else {
		}
	},
	mounted() {
		this.getcityList()
	},
	methods: {
		//获取城市列表
		async getcityList() {
			try {
				let ret = await fetchCityList()
				this.cityList = ret.list
				this.selectValue = `${ret.list[0].id}|${ret.list[0].city_name}`
				this.s_city_id = ret.list[0].id
				this.s_city_name = ret.list[0].city_name
				this.listArea()
			} catch (err) {
				console.log(err)
			}
		},

		async listArea() {
			try {
				let ret = await fetchAreaList({
					page: this.pageNum,
					pageSize: this.pageSizeNow,
					area_name: this.s_name,
					area_name: this.s_name,
					city_id: this.s_city_id,
					city_name: this.s_city_name
				})

				let areaList = []
				ret.list.forEach(item => {
					item.value = item.area_name
					if (item.id != 0) areaList.push(item)
				})

				this.areaList = areaList
				this.total = ret.count
			} catch (err) {
				console.log(err)
			}
		},

		redactBtn(row) {
			//编辑
			// this.readctRoleShow = true; //显示区域框
			this.$router.push({
				path: '/areaAdd',
				query: {}
			})
		},

		changeBtn() {
			if (this.selectValue == '') {
				this.s_city_id = ''
				this.s_city_name = ''
				return false
			}
			let [id, name] = this.selectValue.split('|') // es6 数组解构赋值
			this.s_city_id = id
			this.s_city_name = name
		},

		changeBtndialog() {
			let [id, name, sn] = this.addRoleArr.city_arr.split('|') // es6 数组解构赋值
			this.addRoleArr.city_id = id
			this.addRoleArr.city_name = name
			this.addRoleArr.city_sn = sn
		},
		close() {
			this.readctRoleShow = false //隐藏区域框
			this.readctRoleShowEdit = false //隐藏区域框
			this.setdata()
		},

		shearchBtn() {
			// 搜索
			//请求商圈列表
			this.pageNum = 1
			this.listArea()
		},

		//确定新增商圈
		readctSubmit() {
			//先去触发子组件的方法
			this.$refs.mychildarea.stopedit()
			//请求新增区域接口
			let fn = new FormData()
			fn.append('area_name', this.addRoleArr.name) //商圈名称
			fn.append('city_id', this.addRoleArr.city_id) //城市ID
			fn.append('city_name', this.addRoleArr.city_name) //城市
			fn.append('city_sn', this.addRoleArr.city_sn) //城市sn
			fn.append('coordinates_list', this.addRoleArr.path) //位置信息

			this.$http.post(this.url + '/area/add', fn).then(
				res => {
					console.log(res.data.data)
					if (res.data.msg == '新增成功!' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						//重置
						this.setdata()
						this.pageNum = 1
						this.listArea()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
			this.close()
		},
		//修改商圈
		goAreaEdit(e) {
			let arr = e.coordinates_list
			let new_arr = [arr[0]]
			for (var i = 0; i < arr.length; i++) {
				//对数据进行去重处理,然后进行拼接
				if (i != 0 && '' + arr[i][0] + arr[i][1] != '' + arr[0][0] + arr[0][1]) {
					// arr1 += arr[i] + ';'
					new_arr.push(arr[i])
				}
			}
			// console.log(arr)
			// console.log(new_arr)
			// return
			// arr.pop()

			// this.Editid = e.id;
			// this.addRoleArr.city_arr = e.city_id+'|'+e.city_name+'|'+e.city_sn;
			// this.addRoleArr.city_id = e.city_id;
			// this.addRoleArr.city_name = e.city_name;
			// this.addRoleArr.city_sn = e.city_sn;
			// this.addRoleArr.name = e.area_name;
			// this.addRoleArr.path = e.coordinates_list;
			// //修改中心点
			// this.coordinates = e.coordinates;
			// this.radius = e.radius.toString();
			// this.readctRoleShowEdit = true;
			this.$router.push({
				path: '/areaEdit',
				query: {
					Editid: e.id,
					city_arr: e.city_id + '|' + e.city_name + '|' + e.city_sn,
					city_id: e.city_id,
					city_name: e.city_name,
					city_sn: e.city_sn,
					name: e.area_name,
					path: JSON.stringify(new_arr),
					//修改中心点
					coordinates: e.coordinates,
					radius: e.radius.toString()
				}
			})
		},
		//确定修改
		readctEdit() {
			//先去触发子组件的方法
			this.$refs.mychild.stopedit()
			//请求修改区域接口
			let fn = new FormData()
			fn.append('id', this.Editid) //商圈名称
			fn.append('area_name', this.addRoleArr.name) //商圈名称
			fn.append('city_id', this.addRoleArr.city_id) //城市ID
			fn.append('city_name', this.addRoleArr.city_name) //城市
			fn.append('city_sn', this.addRoleArr.city_sn) //城市sn
			fn.append('coordinates_list', this.addRoleArr.path) //位置信息
			// 中心点信息
			fn.append('coordinates', JSON.stringify(this.coordinates))
			fn.append('radius', this.radius)

			this.$http.post(this.url + '/area/edit', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '修改成功!' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						//重置
						this.setdata()
						this.pageNum = 1
						this.listArea()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
			this.close()
		},
		getMsgFormSon(data) {
			// console.log(data);
			//先处理data数组为指定的字符串格式；
			var arr1 = ''
			var last
			for (var i = 0; i < data.length; i++) {
				arr1 += data[i] + ';'
			}

			last = data[0].toString()
			arr1 += last
			// console.log(arr1);
			this.addRoleArr.path = arr1
		},
		//重置为空
		setdata() {
			this.addRoleArr.name = ''
			this.addRoleArr.city_arr = ''
			this.addRoleArr.city_id = ''
			this.addRoleArr.city_name = ''
			this.addRoleArr.path = ''
			this.coordinates = ''
			this.radius = ''
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listArea()
		}
	},
	filters: {}
}
</script>

<style scoped>
.search_box {
	width: 420px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.roleFunctionBox {
	border: 1px solid #e8e8e8;
	border-radius: 5px;
	padding: 5px;
}
.roleFunctionBox .roleTitle {
	border-bottom: 1px solid #e8e8e8;
}
.roleFunctionBox .roleTitle h3 {
	padding-left: 5px;
	line-height: 30px;
}
.roleFunctionBox .roleTitle h3 span:nth-child(1) {
	display: inline-block;
	width: 110px;
}
.roleFunctionBox .menuName {
	width: 100px;
	padding: 10px 10px 0 0;
	font-size: 14px;
	color: #999999;
	text-align: right;
}
.roleFunctionBox .menFunction {
	width: 600px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}
.s_submit {
	right: -1px;
	border-top-right-radius: 19px;
	border-bottom-right-radius: 19px;
}
.wrap_h5 h5 {
	font-weight: 300;
}
</style>



// WEBPACK FOOTER //
// src/components/sqArea/AreaLists.vue